import React, { Component } from 'react';

import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';

import { Layout, Menu, Button, Modal, Space, message } from 'antd';
// 引入 link 导航组件
import { Link } from 'react-router-dom'
// 引入组件样式
import '@/assets/css/dashboard.css'
// 引入二级路由坑及匹配规则
import Admin from '../../router/Admin';
// 引入url
import url from '@/config/url'
// 引入axios 
import axios from '@/http/http'
// 引入cookie
import Cookies from 'js-cookie';

const { confirm } = Modal;
const { Header, Sider, Content } = Layout;

// 获取登录时本地存的菜单权限数组
const navList = JSON.parse(localStorage.getItem('acl'))
// console.log(navList);
// 定义函数,作用用来返回菜单项数组中的每一个对象结构
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}

const items = [
    // getItem('Option 1', '1', <PieChartOutlined />),
    // getItem('Option 2', '2', <DesktopOutlined />),
    // getItem('User', 'sub1', <UserOutlined />, [
    //     getItem('Tom', '3'),
    //     getItem('Bill', '4'),
    //     getItem('Alex', '5'),
    // ]),
    // getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
    // getItem('Files', '9', <FileOutlined />),
];

// 将navList 菜单项揉和到 items 数组中,这样items 再给 组件属性中的items 赋值即可
if (navList) {
    navList.map(item => {
        //判断是否有子菜单
        if (item.children.length != 0) {
            items.push(getItem(
                item.auth_name,
                item.auth_path, <
                UserOutlined />,
                item.children.map(item1 => {
                    if (item1.is_nav == 1) {
                        //  map 遍历 return 返回值就是新数组的每一项
                        return getItem(<Link to={item1.auth_path} > {item1.auth_name} < /Link>, item1.auth_path, <UploadOutlined /> )
                    }
                })
                            ))
        } else {
                                items.push(getItem(<
                Link to={item.auth_path} > {item.auth_name} < /Link>,
                                    item.auth_path, <
                                        UserOutlined />
                                    ))
        }
    })
}

                                    class Dashboard extends Component {
                                        constructor(props){
                                        super(props)  
        // 调用用户登录验证接口,如果接口返回错误,则表示未登录,重新返回登录页
        axios.get(url.precheck).then(res=>{
                                        {/* console.log(res) */ }
            if(res.data.errNo===0){
                                        // 表示登录验证通过
                                        this.setState({
                                            islogin: true
                                        })
                                    }else{
                                        // 登录验证不通过
                                        this.setState({
                                            islogin: false
                                        })
                message.error('请先登录',1,()=>{
                                        props.history.push('/login')
                                    })
              
            }
        })
    }

                                    state = {
                                        collapsed: false, // 折叠属性 false 不折叠
                                    accountInfo:{ },  // 当前账户信息
                                    islogin:false // 当前的登录状态  // fasle 表示未登录
    }
        // 设置是否折叠
    setCollapsed = () => {
                                        this.setState({
                                            collapsed: !this.state.collapsed
                                        })
                                    }
    // 以类成员属性的方式定义该变量
                                    defaultSelectedKeys = [this.props.location.pathname];
                                    // 初始展开的 SubMenu 菜单项 key 数组
                                    defaultOpenKeys = [this.props.location.pathname.substr(0, this.props.location.pathname.lastIndexOf('/'))]
                                    render() {
                                        {/* console.log(this); */ }
        const {collapsed, accountInfo, islogin} = this.state
                                    return ( islogin?<Layout>
                                        <Sider trigger={null}
                                            collapsible collapsed={collapsed} >
                                            <div className="logo" >
                                                <img src='http://oa.1000phone.net/Public/assets/css/images/logo.png?1657596597' />
                                            </div> <Menu theme="dark"
                                                mode="inline"
                                                defaultOpenKeys={this.defaultOpenKeys}
                                                defaultSelectedKeys={this.defaultSelectedKeys}
                                                items={items} /> </Sider >
                                        <Layout className="site-layout" >
                                            <
                                                Header className="site-layout-background"
                                                style={
                                                    {
                                                        padding: 0,
                                                    }
                                                } > {
                                                    React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                                        className: 'trigger',
                                                        onClick: () => this.setCollapsed(),
                                                    })
                                                }

                                                <span>hello,{accountInfo.username}/{accountInfo.role}</span>
                                                <span className='loginout' onClick={this.loginoutFn}>注销登录</span>
                                            </Header>
                                            <Content className="site-layout-background"
                                                style={
                                                    {
                                                        margin: '24px 16px',
                                                        padding: 24,
                                                        minHeight: 280,
                                                    }
                                                }>
                                                { /*二级路由组件存放的坑 */}
                                                <Admin></Admin>
                                            </Content>
                                        </Layout>
                                    </Layout>:<></>

                                    );
    };
                                    componentDidMount(){
                                        {/* 进行用户信息接口调用 */ }
        axios.get(url.getmyinfo).then(res=>{
                                        {/* console.log(res) */ }
            this.setState(()=>{
               return{
                                        accountInfo:res.data.accountInfo
               } 
            })
        }).catch(e=>{ })
    };
    loginoutFn = ()=>{
                                        //弹出提示框
                                        confirm({
                                            title: '提示',
                                            icon: <ExclamationCircleOutlined />,
                                            content: '确认要退出当前账号吗?',
                                            onOk: () => {
                                                // 清除本地存储的内容
                                                Cookies.remove('jwt');
                                                localStorage.removeItem('acl');
                                                // 返回到登录页
                                                message.success('退出成功', 1, () => {
                                                    this.props.history.push('/login')
                                                })
                                            },
                                            onCancel() {
                                                console.log('Cancel');
                                            },
                                        }); 
    }
}

                                    export default Dashboard;